import React, { useState } from 'react';
import zhCN from 'antd/locale/zh_CN';
import 'antd/dist/reset.css';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import styled from "styled-components";
import CodeHeader from './components/codeHeader';

const { Content, Footer, Sider } = Layout;
const CodeFooter = styled(Footer)`
  background:#ffffff !important;
  color:black;
  text-align:center;
`
const CodeSider = styled(Sider)(props => ({
  background: '#ffffff !important',
  color: 'black !important',
  overflow: 'auto',
  height: '100vh',
  width: '200px',
  position: 'fixed',
  left: 0,
  top: 0,
  bottom: 0,
  "& .ant-layout-sider-trigger": {
    background: '#ffffff !important',
    color: 'black !important',
  }
}))

const items1: MenuProps['items'] = ['主页', '资源', '案例'].map((key) => ({
  key,
  label: `${key}`,
}));

const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
  (icon, index) => {
    const key: any = String(index + 1);

    return {
      key: `sub${key}`,
      icon: React.createElement(icon),
      label: `subnav ${key}`,

      children: new Array(4).fill(null).map((_, j) => {
        const subKey: any = index * 4 + j + 1;
        return {
          key: subKey,
          label: `option${subKey}`,
        };
      }),
    };
  },
);

const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [activeItem, setActiveItem] = useState('主页');
  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    setActiveItem(e.key)
  };
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <CodeHeader
        items1={items1}
        onClick={onClick}
      />
      <Layout >
        {
          activeItem !== "主页" && (
            <CodeSider
              collapsible
              collapsed={collapsed}
              onCollapse={(value) => setCollapsed(value)}
            >
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{ height: '100%', borderRight: 0 }}
                items={items2}
              />
            </CodeSider>
          )
        }
        <Layout style={{ padding: '0 24px 24px' }}>
          {/* <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb> */}
          <Content

            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
      <CodeFooter>Ant Design ©2018 Created by Ant UED</CodeFooter>
    </Layout>
  )

};

export default App;